<template>
	<view class="login" @touchmove.stop.prevent="">
		<image @click="fanhui" class="login-bg" src="https://x.bilinmeiju.com/static/denglu/close.png" mode=""></image>
		<view class="login-content" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="login-content-header" :style="{ height: menuButtonHeight + (menuButtonTop - statusBarHeight) * 2  + 'px' }">
				<image class="login-content-header-close" src="https://x.bilinmeiju.com/static/close.png" mode=""></image>
			</view>
			<view class="login-content-box">
				<view class="login-content-box-phone">
					欢迎进入<text>比邻美居智慧社区</text>
				</view>
				
				<view class="login-content-box-input" style="margin: 100rpx 0 70rpx;">
					<input type="number" placeholder="请输入手机号码">
				</view>
				
				<view class="login-content-box-input">
					<input type="password" placeholder="请输入密码">
				</view>
				
				<view class="login-content-box-label">
					<text @click="wangji">忘记密码</text>
					<text @click="zhuce">注册</text>
				</view>
				
				<view @click="denglu" class="login-content-box-button active">
					登录
				</view>

				<view class="login-content-box-wechat">
					登录即表示同意<text>《隐私保护声明》</text>和<text>《用户使用协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		computed: {
			statusBarHeight(){
				return this.$store.state.statusBarHeight
			},
			menuButtonHeight(){
				return this.$store.state.menuButtonHeight
			},
			menuButtonTop(){
				return this.$store.state.menuButtonTop
			}
		},
		methods:{
			wangji(){
				uni.navigateTo({
					url:'/pages/login/login-password-setting'
				})
			},
			zhuce(){
				uni.navigateTo({
					url:'/pages/login/zhuce'
				})
			},
			denglu(){
				uni.switchTab({
					url:'/pages/index/home'
				})
			},
			fanhui(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100%;
	}
	.login{
		margin-top: 90rpx;
		width: 100%;
		height: 100%;
		
		&-bg{
			margin-left: 20rpx;
			width: 24rpx;
			height: 24rpx;
			position: absolute;
			z-index: -1;
		}
		
		&-content{
			width: 100%;
			box-sizing: border-box;
			
			&-header{
				width: 100%;
				display: flex;
				align-items: center;
				padding: 0 32rpx;
				box-sizing: border-box;
				
				&-close{
					width: 30rpx;
					height: 30rpx;
				}
			}
			
			&-box{
				width: 580rpx;
				padding-top: 130rpx;
				display: flex;
				flex-direction: column;
				margin: 0 auto;
				
				&-label{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #808080;
					font-size: 24rpx;
					margin-top: 30rpx;
				}
				
				&-input{
					width: 100%;
					height: 84rpx;
					border-bottom: 1px solid #efefef;
					display: flex;
					align-items: center;
					
					>input{
						width: 100%;
						height: 100%;
					}
				}
				
				&-phone{
					color: #000000;
					font-size: 36rpx;
					font-weight: bold;
					
					>text{
						color: #FE7B00;
					}
				}
				
				&-text{
					color: #999999;
					font-size: 24rpx;
					margin-top: 50rpx;
				}
				
				&-button{
					width: 100%;
					height: 88rpx;
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					font-weight: normal;
					background: #EEEEEE;
					color: #999999;
					margin-top: 40rpx;
				}
				
				.active{
					margin-top: 100rpx;
					color: #fff;
					background: linear-gradient(to right,#FFAE45,#FE7B00);
				}
				
				&-checkbox{
					display: flex;
					align-items: center;
					margin-top: 40rpx;
					
					image{
						width: 30rpx;
						height: 30rpx;
						margin-right: 14rpx;
					}
					
					&-text{
						color: #666666;
						font-size: 24rpx;
						flex: 1;
						line-height: 40rpx;
						
						>text{
							color: #C98E1C;
						}
					}
				}
				
				&-wechat{
					width: 100%;
					position: absolute;
					bottom: 76rpx;
					left: 50%;
					transform: translateX(-50%);
					display: flex;
					align-items: center;
					justify-content: center;
					color: #999999;
					font-size: 24rpx;
					
					text{
						color: #000000;
						
					}
				}
			}
		}
		
		
	}
</style>
